<template>
  <el-card style="width: 100%">
    <el-table :data="filterTableData" border style="width: 90%">
      <el-table-column label="分类ID" prop="date" width="150" align="center" />
      <el-table-column label="分类名称" prop="name" />
      <el-table-column align="center" width="250">
        <template #header>
          <el-input v-model="search" placeholder="按Enter添加一级分类" />
        </template>
        <template #default="scope">
          <el-button
            size="small"
            type="primary"
            @click="handleEdit(scope.$index, scope.row)"
            :icon="Plus"
          />

          <el-button
            size="small"
            type="primary"
            :icon="Edit"
            @click="handleDelete(scope.$index, scope.row)"
          />
          <el-button
            size="small"
            type="danger"
            :icon="Delete"
            @click="handleDelete(scope.$index, scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script lang="ts">
export default {
  name: "CCartgroy",
};
</script>

<script lang="ts" setup>
import { computed, ref } from "vue";
import { Plus, Edit, Delete } from "@element-plus/icons-vue";

interface User {
  date: string;
  name: string;
  address: string;
}
const search = ref("");
const filterTableData = computed(() =>
  tableData.filter(
    (data) =>
      !search.value ||
      data.name.toLowerCase().includes(search.value.toLowerCase())
  )
);
const handleEdit = (index: number, row: User) => {
  console.log(index, row);
};
const handleDelete = (index: number, row: User) => {
  console.log(index, row);
};

const tableData = [
  {
    date: "2016-05-03",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-02",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-04",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
  {
    date: "2016-05-01",
    name: "Tom",
    address: "No. 189, Grove St, Los Angeles",
  },
];
</script>

<style scoped></style>
